<template>
    <div class="classfig">
        <div class="top">
            <el-breadcrumb separator="">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>全部商品</el-breadcrumb-item>
                <el-breadcrumb-item>分类</el-breadcrumb-item>
            </el-breadcrumb>

            <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="全部" name="0">
                    <div class="phone-it">
                        <div class="right" v-for="(item, index) in whole" :key="index" style="background-color: #fff;">
                            <img :src="'http://101.132.181.9/api/' + item.product_picture" alt="">
                            <p>{{ item.product_name }}</p>
                            <p>{{ item.product_title }}</p>
                            <span style="color: #ff9277;">{{ item.product_selling_price }}元&ensp;</span>
                            <span style="text-decoration:line-through;color: #b0b0b0;">{{ item.product_price }}元</span>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="手机" name="1"></el-tab-pane>
                <el-tab-pane label="电视机" name="2"></el-tab-pane>
                <el-tab-pane label="空调" name="3"></el-tab-pane>
                <el-tab-pane label="洗衣机" name="4"></el-tab-pane>
                <el-tab-pane label="保护套" name="5"></el-tab-pane>
                <el-tab-pane label="保护膜" name="6"></el-tab-pane>
                <el-tab-pane label="充电器" name="7"></el-tab-pane>
                <el-tab-pane label="充电宝" name="8"></el-tab-pane>
                <!-- 分页 -->
                <el-pagination layout="prev, pager, next" :total="total" @current-change="handleCurrentChange">
                </el-pagination>
            </el-tabs>
        </div>

    </div>
</template>

<script>
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { ref, reactive, toRefs } from "vue";
import { allGoods, allpage } from "@/http/api.js";
export default {
    name: "classfig",
    components: {},
    setup() {
        // 引入路由
        const router = useRouter();
        // 引入仓库
        const store = useStore();
        const data = reactive({
            activeName: "0",
            allList: [],
            page: {
                categoryID: [],
                currentPage: 1,
                pageSize: 15
            },
            whole: [], //全部
            total: 0
        });
        const handleClick = () => {
            console.log(data.activeName);
        };
        let getAll = () => {
            allGoods().then(res => {
                console.log(res);
                data.allList = res.category;
                data.activeName = res.category.category_id;
            });
        };
        let getAllPage = () => {
            allpage(data.page).then(res => {
                console.log(res);
                data.whole = res.Product;
                data.total = res.total;
            });
        };
        let handleCurrentChange = (val) => {
            data.page.currentPage = val
            console.log(val);
            getAllPage();
        }
        getAll();
        getAllPage();
        return {
            ...toRefs(data),
            handleClick,
            handleCurrentChange
        };
    }
};
</script>

<style lang="scss" scoped>
.classfig {
    .top {
        width: 100%;
        height: 100px;
        background-color: #fff;
        padding: 10px;

        .el-breadcrumb {
            width: 80%;
            margin: 0 auto;
        }

        .el-tabs {
            width: 80%;
            margin: 0 auto;
        }
    }

    .phone-it {
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: center;

        .right {
            width: 234px;
            height: 300px;
            text-align: center;
            margin: 5px 0;
            line-height: 30px;

            img {
                width: 160px;
                height: 160px;
            }
        }
    }
}
</style>